<template>
  <div>
    <el-container class="app-item-contain">
      <el-main>
        <el-form :model="form" ref="form" v-loading="formLoading" label-width="100px">
          <el-row>
            <el-card class="exampaper-item-box">
              <el-form-item class="exam-question-item" label-width="50px">
                <QuestionAnswerShow2
                  :qType="questionItem.questionType"
                  :question="questionItem"
                  :answer="answer"
                />
              </el-form-item>
            </el-card>
          </el-row>

          <el-row class="do-align-center">
            <el-button type="primary" @click="submitForm">查看答案</el-button>
            <el-button @click="nextQuestion">下一题</el-button>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import QuestionEdit from "../components/QuestionEdit";
import QuestionEdit2 from "../components/QuestionEdit2";
import QuestionAnswerShow2 from "../components/QuestionAnswerShow2";
import examPaperApi from "@/api/examPaper";
import examPaperApi2 from "@/api/examPaper2";
import examPaperAnswerApi from "@/api/examPaperAnswer";
import examPaperAnswerApi2 from "@/api/examPaperAnswer2";

export default {
  components: { QuestionAnswerShow2 },
  data() {
    return {
      form: {},
      list: [],
      questionItem: {},
      formLoading: false,
      answer: {}
    };
  },
  created() {
    let id = this.$route.query.id;
    let _this = this;

    _this.getQuestion();
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    questionCompleted(completed) {
      return this.enumFormat(this.doCompletedTag, completed);
    },
    goAnchor(selector) {
      this.$el.querySelector(selector).scrollIntoView({
        behavior: "instant",
        block: "center",
        inline: "nearest"
      });
    },
    initAnswer() {
      let _this = this;
      if (_this.form.size >= 0) {
        _this.list = _this.form.list;
        _this.questionItem = _this.list[0];
        _this.answer = {
          questionId: _this.questionItem.id,
          content: null,
          contentArray: [],
          completed: false,
          isShow: false
        };
        _this.list.shift();
      }
    },
    getQuestion() {
      let _this = this;

      _this.formLoading = true;
      examPaperApi2.list().then(re => {
        _this.form = re.response;
        _this.initAnswer();
        _this.formLoading = false;
      });
    },
    nextQuestion() {
      let _this = this;
      if (_this.list.length > 0) {
        _this.questionItem = _this.list[0];
        _this.answer = {
          questionId: _this.questionItem.id,
          content: null,
          contentArray: [],
          completed: false,
          isShow: false
        };
        _this.list.shift();
      } else {
        _this.getQuestion();
      }
    },
    submitForm() {
      let _this = this;

      if (_this.answer.completed) {
        if (_this.answer.content === _this.questionItem.correct||_this.answer.contentArray.join(',') === _this.questionItem.correct) {
          _this.answer.doRight = true;
        } else {
          _this.answer.doRight = false;
        }

        if(!_this.answer.isShow){
          examPaperAnswerApi2
            .answerSubmit(_this.answer)
            .then(re => {
              if (re.code === 1) {
                
              } else {
                _this.$message.error(re.message);
              }
            });
        }
      }
      _this.answer.isShow = true;
    }
  },
  computed: {
    ...mapGetters("enumItem", ["enumFormat"]),
    ...mapState("enumItem", {
      doCompletedTag: state => state.exam.question.answer.doCompletedTag
    })
  }
};
</script>

<style lang="scss" scoped>
.align-center {
  text-align: center;
}

.exam-question-item {
  padding: 10px;

  .el-form-item__label {
    font-size: 15px !important;
  }
}

.question-title-padding {
  padding-left: 25px;
  padding-right: 25px;
}
</style>
